<template>
    <div class="dashboard">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <div class="welcome-text">欢迎使用 竞成网络安全漏洞平台</div>
                    <img src="../assets/images/image1.jpg" alt="Welcome" class="welcome-image" />
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div class="announcement">
                        <h3>公告</h3>
                        <!-- <p>出售HDOI题库，支持一键导入，需要联系qq：794344598</p> -->
                        <el-button type="primary">编辑</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="24">
                <el-card>
                    <div class="chart">
                        <h3>最近一周提交统计</h3>
                        <!-- 这里可以放置一个图表组件，例如使用ECharts -->
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="12">
                <el-card>
                    <h3>最新题目</h3>
                    <el-table :data="latestProblems">
                        <el-table-column prop="id" label="题目ID"></el-table-column>
                        <el-table-column prop="name" label="标题"></el-table-column>
                        <el-table-column prop="difficulty" label="难度系数"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <h3>支持的远程评测平台</h3>
                    <el-carousel :interval="4000" type="card" height="200px">
                        <el-carousel-item v-for="item in platforms" :key="item.name">
                            <h3>{{ item.name }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            latestProblems: [
                { id: 'Z104', name: 'BF算法', difficulty: '15天前' },
                { id: 'OJM-1021SA', name: 'Rooms and Passages', difficulty: '1个月前' },
                // 更多题目...
            ],
            platforms: [
                { name: 'Codeforces' },
                { name: 'POJ' },
                { name: 'CodeforcesTime' },
                // 更多平台...
            ],
        };
    },
};
</script>

<style scoped>
.dashboard {
    padding: 20px;
}


.welcome-image {
    width: 100%;
    height: auto;
}

.welcome-text {
    text-align: center;
    margin-top: 2px;
    font-size: 24px;
    color: #0b4d75;
}

.announcement {
    margin-bottom: 20px;
}

.chart {
    height: 300px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>